<template>
	<div class="form">
		<div>
			<el-input v-model="filterData.name" placeholder="商家名称"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<!--<el-input v-model="filterData.username" placeholder="商家账号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-->
			<el-input v-model="filterData.phone" placeholder="联系电话"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.id" placeholder="商家ID"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.contractNum" placeholder="合同编号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p>时间：
				<el-date-picker
			      	v-model="filterData.dates"
			      	type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']"
			      	align="right"
			      	unlink-panels
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	:picker-options="pickerOptions2"			      	
			      	value-format="timestamp">
			    </el-date-picker>
			</p>
		    <!--<p>新增商家：
				<el-date-picker
			      	v-model="value7"
			      	type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']"
			      	align="right"
			      	unlink-panels
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	:picker-options="pickerOptions2"
			      	value-format="timestamp">
			    </el-date-picker>
			</p>
			<p>充值商家：
				<el-date-picker
			      	v-model="value7"
			      	type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']"
			      	align="right"
			      	unlink-panels
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	:picker-options="pickerOptions2"
			      	value-format="timestamp">
			    </el-date-picker>
			</p>
			<p>消耗商家：
				<el-date-picker
			      	v-model="value7"
			      	type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']"
			      	align="right"
			      	unlink-panels
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	:picker-options="pickerOptions2"
			      	value-format="timestamp">
			    </el-date-picker>
			</p>	-->		
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click="reset">重置</el-button>
			</p>
			<el-table border :data="tableData" style="width: 100%">
				<el-table-column type="index"width="50" label="序号" >					
				</el-table-column>
				<el-table-column prop="id" label="商家ID/编号" width="120">
				</el-table-column>
				<el-table-column prop="name" label="商家名称" width="220">
				</el-table-column>
				<el-table-column prop="contractNum" label="合同编号" width="120">
				</el-table-column>
				<!--<el-table-column prop="username" label="商家帐号" width="120">
				</el-table-column>-->
				<el-table-column prop="phone" label="联系电话" width="150">
				</el-table-column>
				<el-table-column prop="address" label="商家地址" width="350">
				</el-table-column>				
				<el-table-column prop="acceptTaskCount" label="已接任务数" width="200">
				</el-table-column>
				<el-table-column prop="consumeNumber" label="消费金额" width="120">
				</el-table-column>
				<el-table-column prop="issueAdCount" label="发布广告数" width="100">
				</el-table-column>
				<el-table-column prop="rechargeNumber" label="充值金额" width="80">
				</el-table-column>		
			</el-table>		
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					   :current-page="filterData.current" :current-page.sync="filterData.current" 
					   :page-sizes="[10, 15, 20, 30]" :page-size="filterData.size" 
					   layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
				
	</div>
</template>

<script type="text/javascript">
	import {busPage,pickerOptions2,formatter} from '@/api/common'
	export default {
		created(){
			this.query();
		},
		methods: {
			handleSizeChange(val) {
				this.filterData.size = val;
				this.query();
			},
			handleCurrentChange(val) {
				this.filterData.current = val;
				this.query();
			},					
			query(){											//查询
				console.log(this.filterData)
				busPage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
					this.total = parseInt(res.data.total);
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},			
			reset(){										//重置
				this.filterData = {					 
					contractNum: null,					//合同编号		
				  	dates: [],						//时间
				  	id: null,						//商家ID
				  	name: "",						//商家名称
				  	phone: "",						//联系电话
				  	proxyId: 0,						//代理ID
				  	//username: "",					//商家账号
					current:1,
					size:10,
				}
				this.query();
			},			
		},
		data() {
			return {
				//主列表数据
				filterData:{	
					contractNum: null,					//合同编号		
				  	dates: [],						//时间
				  	id: null,						//商家ID
				  	name: "",						//商家名称
				  	phone: "",						//联系电话
				  	proxyId: 0,						//代理ID
				  	//username: "",					//商家账号
					current:1,
					size:10,
				},
				tableData: [],				//主列表数据
				total:null,
				pickerOptions2:pickerOptions2				
			}
		}
	}
</script>

<style scoped="scoped">
	.el-input{
		width:200px;
		margin-bottom: 20px;
	}
	.el-input {
		width:200px
	}
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
	.el-date-editor {
		margin-bottom:20px
	}
</style>